<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .full{
            width: 700px;
            margin: 0 auto;
            border: 1px solid rebeccapurple;
        }
        .full .menu{
            height: 38px;
            line-height: 38px;  /*让字体居中*/
            background-color: #eeeeee;
        }
        .full .menu .menu-item{
            float: left; /*往左浮动，三个div变成一行*/
            border-right: 1px solid brown;
            padding: 0 5px;   /* 上下边距为0，左右边距为5px */
            cursor: pointer;  /*当放上鼠标时，指针变成小手*/
        }
        .active{
            background-color: brown;
        }
        .full .content{
            min-height: 100px;  /*设置最小高度，小于最小高度时，出现滚动条*/
            border: 1px solid darkgreen;
        }
    </style>
</head>
<body>

<div class="full">
    <div class="menu">
        <div class="menu-item active" item-tag="1" id="i1">标题一</div>
        <div class="menu-item" item-tag="2">标题二</div>
        <div class="menu-item" item-tag="3">标题三</div>
    </div>
    <div class="content">
        <div con-tag="1">内容一</div>
        <div class="hide" con-tag="2">内容二</div>
        <div class="hide" con-tag="3">内容三</div>
    </div>

</div>



<script src="jquery-1.12.4.js"></script>
<script>
    $('.full .menu .menu-item ').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        var itemTag = $(this).attr('item-tag');
        /* 方法一 -- 属性相等
        $('.full .content').children().each(function () {
            if ($(this).attr('con-tag') == itemTag){
                $(this).removeClass('hide').siblings().addClass('hide');
            }
        });*/

        /*方法二 --  自定义属性，字符串拼接
        $('.full .content').children("[con-tag='" + itemTag + "']").removeClass('hide').siblings().addClass('hide');
        */
        //方法三 -- 根据索引位置
        var ind = $(this).index();
        // $($('.full .content').children()[ind]).removeClass('hide').siblings().addClass('hide');
        // 使用筛选器eq(index)
        $('.full .content').children().eq(ind).removeClass('hide').siblings().addClass('hide');
    })
</script>


</body>
</html>